<script setup>
import { ref, onMounted } from 'vue';
import { carList } from '@/apis/my.js';
const List = ref({});
const pictureList = ref([]); //轮播图数组
//页面加载就渲染数据
onMounted(async () => {
	const res = await carList();
	console.log('页面加载', res);
	List.value = res.data;
	pictureList.value = res.data.pictureList;
});
</script>

<template>
	<view class="page-container">
		<!-- 轮播图 -->
		<swiper class="truck-pictures" indicator-active-color="#fff" circular indicator-dots>
			<swiper-item v-for="(item, index) in pictureList">
				<image class="picture" mode="aspectFill" :src="item.url"></image>
			</swiper-item>
		</swiper>
		<view class="truck-meta">
			<uni-list :border="false">
				<uni-list-item :border="false" title="车辆编号" :rightText="List.id" />
				<uni-list-item :border="false" title="车辆号牌" :rightText="List.licensePlate" />
				<uni-list-item :border="false" title="车型" :rightText="List.truckType" />
				<uni-list-item :border="false" title="所属机构" :rightText="List.currentOrganName" />
				<uni-list-item :border="false" title="载重" :rightText="List.allowableLoad + '吨'" />
			</uni-list>
		</view>
	</view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
